<template>
    <view class="u-calendar-header u-border-bottom">
        <text class="u-calendar-header__title" v-if="showTitle">{{ title }}</text>
        <text class="u-calendar-header__subtitle" v-if="showSubtitle">{{ subtitle }}</text>
        <view class="u-calendar-header__weekdays">
            <text
                class="u-calendar-header__weekdays__weekday"
                v-for="(item, index) in 7"
                :key="item"
            >
                {{ weekText[index] }}
            </text>
        </view>
    </view>
</template>

<script>
import { mpMixin } from '../../libs/mixin/mpMixin'
import { mixin } from '../../libs/mixin/mixin'
export default {
    name: 'u-calendar-header',
    mixins: [mpMixin, mixin],
    props: {
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 是否显示标题
        showTitle: {
            type: Boolean,
            default: true
        },
        // 副标题
        subtitle: {
            type: String,
            default: ''
        },
        // 是否显示副标题
        showSubtitle: {
            type: Boolean,
            default: true
        },
        // 星期文本
        weekText: {
            type: Array,
            default: () => {
                return ['一', '二', '三', '四', '五', '六', '日']
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

.u-calendar-header {
    display: flex;
    flex-direction: column;
    padding-bottom: 4px;

    &__title {
        font-size: 17px;
        color: $u-main-color;
        text-align: center;
        height: 48px;
        line-height: 48px;
        font-weight: bold;
    }

    &__subtitle {
        font-size: 14px;
        color: $u-main-color;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    &__weekdays {
        @include flex;
        justify-content: space-between;

        &__weekday {
            font-size: 14px;
            color: $u-main-color;
            line-height: 30px;
            flex: 1;
            text-align: center;
        }
    }
}
</style>
